<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>view</title>
    <link rel="stylesheet" href="/static/css/base.css">
    <link rel="stylesheet" href="/static/css/testvideo.css">
    <link rel="stylesheet" href="/static/css/swiper.min.css">
    <link rel="stylesheet" href="/static/css/index.css">
    <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
    <script src="/static/js/jquery-2.1.1.min.js"></script>
    <script src="/static/js/swiper.min.js"></script>
    <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    <script src="/static/js/html2canvas.min.js"></script>
    <style>
        .create_container {
            display: none;
        }

        #box {
            width: 200px;
            height: 100px;
            cursor: move;
            position: absolute;
            top: 30px;
            left: 30px;
            background-color: #FFF;
            border: 1px solid #CCCCCC;
            -webkit-box-shadow: 10px 10px 25px #ccc;
            -moz-box-shadow: 10px 10px 25px #ccc;
            box-shadow: 10px 10px 25px #ccc;
        }

        #coor {
            width: 10px;
            height: 10px;
            overflow: hidden;
            cursor: se-resize;
            position: absolute;
            right: 0;
            bottom: 0;
            background-color: #09C;
        }

        .mt-1,
        .mt-2 {
            width: 100px;
            height: 100px;
            background: #fff;
        }

        .mt-1>input,
        .m-2>inzput {
            width: 30%;
        }

        .c2 {
            left: 0;
            top: 3;
        }

        .c3 {
            border: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="container">
            <div class="logo"><img src="/static/img/logo.png" alt="" srcset=""></div>
            <div class="title"><img src="/static/img/title.png" alt=""></div>
            <div class="sceach_box">
                <div class="is_select">请选择3个或更多对象</div>
                <div class="drop_down_box">
                    <img src="/static/img/dd_btn.png" class="dd_btn">
                </div>
                <div class="select_group">
                    <div class="select_f">
                        <div class="option_box">
                            <div class="option_b"><input class="option_c" name="multiple" value="earth"
                                    type="checkbox" />
                            </div>
                            <div class="option_name">earth</div>
                        </div>
                        <div class="option_box">
                            <div class="option_b"><input class="option_c" name="multiple" value="sand"
                                    type="checkbox" />
                            </div>
                            <div class="option_name">sand</div>
                        </div>
                        <div class="option_box">
                            <div class="option_b"><input class="option_c" name="multiple" value="field"
                                    type="checkbox" />
                            </div>
                            <div class="option_name">field</div>
                        </div>
                        <div class="option_box">
                            <div class="option_b"><input class="option_c" name="multiple" value="sea" type="checkbox" />
                            </div>
                            <div class="option_name">sea</div>
                        </div>
                        <div class="option_box">
                            <div class="option_b"><input class="option_c" name="multiple" value="grass"
                                    type="checkbox" />
                            </div>
                            <div class="option_name">grass</div>
                        </div>
                        <div class="option_box">
                            <div class="option_b"><input class="option_c" name="multiple" value="sky" type="checkbox" />
                            </div>
                            <div class="option_name">sky</div>
                        </div>
                        <div class="option_box">
                            <div class="option_b"><input class="option_c" name="multiple" value="lake"
                                    type="checkbox" />
                            </div>
                            <div class="option_name">lake</div>
                        </div>
                        <div class="option_box">
                            <div class="option_b"><input class="option_c" name="multiple" value="tree"
                                    type="checkbox" />
                            </div>
                            <div class="option_name">tree</div>
                        </div>
                        <div class="option_box">
                            <div class="option_b"><input class="option_c" name="multiple" value="rock"
                                    type="checkbox" />
                            </div>
                            <div class="option_name">rock</div>
                        </div>
                        <div class="option_box">
                            <div class="option_b"><input class="option_c" name="multiple" value="water"
                                    type="checkbox" />
                            </div>
                            <div class="option_name">water</div>
                        </div>
                        <div class="option_box">
                            <div class="option_b"><input class="option_c" name="multiple" value="mountain"
                                    type="checkbox" />
                            </div>
                            <div class="option_name">mountain</div>
                        </div>
                    </div>
                    <div class="select_btn">确认</div>
                </div>
            </div>
            <div class="photo_box">
                <div class="photo_ch keyword_box" id="containment-wrapper">
                    <img src="/static/img/img1.png" alt="" class="bg">
                </div>
                <div class="photo_ch photo_a">
                    <!-- <img src="/static/img/img2.png"> -->
                    <img src="/static/images/loading.gif" class="loading" board="1" alt="" />
                    <canvas id="canvas_a"></canvas>
                </div>
                <div class="photo_ch photo_b">
                    <!-- <img src="/static/img/img3.png" alt=""> -->
                    <img src="/static/images/loading.gif" class="loading" board="1" alt="" />
                    <canvas id="canvas_b"></canvas>
                </div>
            </div>
            <div class="tips">
                <img src="/static/img/icon1.png" alt="">
                <div class="tips_text">请定位并调整对象大小</div>
                <div class="end_btn next_btn">
                    <img src="/static/img/btn.png" alt="">
                </div>
            </div>
        </div>
        <div class="create_container">
            <img src="/static/img/back.png" alt="" class="back">
            <div class="logo"><img src="/static/img/logo.png" alt="" srcset=""></div>
            <div class="title"><img src="/static/img/title.png" alt=""></div>
            <div class="Postcard_box">
                <div class="Postcard_class">
                    请选择明信片样式
                </div>
                <!-- <img src="" alt="" class="poster" id="imgPoster"> -->
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" id="slide1">
                            <div class="left">
                                <img src="" alt="" class="img3">
                            </div>
                            <div class="right">
                                <div class="text-box">
                                    <p class="cont"></p>
                                    <p class="name"></p>
                                </div>
                                <div class="img-box">
                                    <img src="" alt="" class="img1">
                                    <img src="" alt="" class="img2">
                                </div>
                            </div>
                            <img src="/static/img/a.jpg" alt="" class="bg">
                        </div>
                        <div class="swiper-slide" id="slide2">
                            <div class="left">
                                <img src="" alt="" class="img3">
                            </div>
                            <div class="right">
                                <div class="text-box">
                                    <p class="cont"></p>
                                    <p class="name"></p>
                                </div>
                                <div class="img-box">
                                    <img src="" alt="" class="img1">
                                    <img src="" alt="" class="img2">
                                </div>
                            </div>
                            <img src="/static/img/a.jpg" alt="" class="bg">
                        </div>
                    </div>
                </div>
                <!-- Add Arrows -->
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>
            <div class="content_box">
                <div class="sceach_box">
                    <input type="text" maxlength="15" class="is_select Postcard_text" placeholder="请输入明信片内容">
                    <!-- <div class="drop_down_box Postcard_btn">确认</div> -->
                </div>
                <div class="sceach_box">
                    <input type="text" maxlength="7" class="is_select Sign_text" placeholder="请添加署名">
                    <!-- <div class="drop_down_box Sign_btn">确认</div> -->
                </div>
            </div>
            <div class="tips">
                <div class="end_btn print_btn">
                    <img src="/static/img/p-btn.png" alt="">
                </div>
            </div>
        </div>
        <div class="Printing">
            <img src="/static/img/printing.png" alt="">
        </div>
        <div class="finish">
            <img src="/static/img/finish.png" alt="">
        </div>
    </div>
    <img src="" alt="" class="poster" id="imgPoster" style="display: block;width: 840px;">
</body>
<script>
    var image = new Image();
    var wsProtocol = "ws://";
    if (window.location.protocol == "https:") {
        wsProtocol = "wss://";
    }
    var wsUrl = wsProtocol + window.location.host + "/websocket?req={{req}}&name={{channel_name}}";
</script>
<script src="/static/js/index.js"></script>
<script src="/static/js/Print.js"></script>

</html>